<!--
 * @Description: GPT应用场景
 * @Author: gn
 * @Date: 2023-12-18 17:32:41
 * @LastEditors: gn
 * @LastEditTime: 2023-12-20 14:09:27
-->
<script lang="ts" setup>
import { NSpace, NAvatar, useMessage } from 'naive-ui'
import SceneItem from "./component/SceneItem.vue";
import { ref } from "vue";
import {
  SyncOutlined
} from '@vicons/antd';


const message = useMessage()

const ifRotate = ref<boolean>(false);

const cardItems = [
  {
    id: 1,
    tt: "住在心里孤独的我",
    msg: '住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪'
  },
  {
    id: 2,
    tt: "住在心里孤独的我2",
    msg: '住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪'
  },
  {
    id: 3,
    tt: "住在心里孤独的我3",
    msg: '住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪'
  },
  {
    id: 4,
    tt: "住在心里孤独的我4",
    msg: '住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪'
  }
]

const firstBg = {
  background: 'url(/gptItemBg.jpg) 0px 0px / cover no-repeat'
}

function getChangesence(type: string) {
  type === 'change' && (ifRotate.value = true);

  const timeout = setTimeout(() => {
    ifRotate.value = false;
    clearTimeout(timeout)
  }, 1000);


  return message.success(
    "没有更多啦~~~",
    { duration: 2000 }
  )
}
</script>
<template>
  <n-space vertical class="scene-box" justify="center">
    <n-avatar round size="small" src="/favicon.svg" />
    <h2 class="sceneTt">你好，我是运维大脑</h2>
    <p class="desc">我能理解人类语言、生成内容，是你生活和工作的智能助手</p>
    <p class="prompt">试试这样问我：</p>
    <n-space class="changAndMore" justify="end">
      <div class="changAndMore-change" @click="() => getChangesence('change')">
        <span style="margin-top: 3px;">
          <SyncOutlined :class="ifRotate && 'rotate'" width="14" height="14" />
        </span>
        <P>换一换</P>
      </div> | <a class="changAndMore-more" @click="() => getChangesence('more')">更多 ></a>
    </n-space>
    <n-space class="item-box" justify="space-around" size="large">
      <scene-item class="scene-item" v-for=" (item, index) of  cardItems " :style="index
        || firstBg" :key='item.id' :sceneData="item" />
    </n-space>
  </n-space>
</template>




<style lang="less" scoped>
@import url(./style/index.less);
</style>